<template>
  <div
    class="signContain"
    :class="{
      lowPress: allData?.yldj == '0',
      primaryPress: allData?.yldj == '1',
      highPress: allData?.yldj == '2',
    }"
    @click="handleClick"
  >
    <div>{{ labelArr[Number(allData?.yldj)] }}</div>
    <div>{{ allData?.bzmc }}</div>
  </div>
</template>
<script setup lang="ts">
import { useBusinessStore } from '@/store'
import { queryStxx } from '@/service'

const store = useBusinessStore()
const qyId: any = inject('qyId')
const allData: any = inject('attribute')

const labelArr = ref(['低压', '常压', '高压'])

const handleClick = () => {
  store.tabId = 7
  store.currentTab = 'CurrenComp'
  store.currentTabName = '储罐'
  store.currentID = 9
  store.isBigLabel = true
  store.StorageTankInfoAttirbute = allData
  console.log(store.StorageTankInfoAttirbute)

  queryStxx({ bzbh: allData.bzbh, bzmc: allData.bzmc, qyId: qyId.qyId, yslx: allData.yslx }).then(
    (res: any) => {
      store.StorageTankInfo = res?.obj
      store.StorageMxxxInfo = res?.mxxxInfo
    }
  )
}
</script>
<style lang="less" scoped>
.signContain {
  width: 200px;
  height: 40px;
  padding: 0 20px;
  text-align: center;
  font-size: 20px;
  font-family: MicrosoftYaHei;
  font-weight: bolder;
  color: #ffffff;
  // line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.primaryPress {
  // background: linear-gradient(90deg, rgb(255, 255, 0, .6) 0%, #0000008e 100%);
  background: linear-gradient(
    90deg,
    rgba(205, 205, 81, 0.7) 0%,
    rgb(193 193 45 / 50%) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  border-left: 10px solid #ffff00;
}

.lowPress {
  background: linear-gradient(90deg, #00ffffb7 0%, #0000008e 100%);
  border-left: 10px solid #00ffff;
}

.highPress {
  background: linear-gradient(90deg, #002546 0%, rgba(255, 153, 0, 0.6) 0%, #0000008e 100%);
  border-left: 10px solid hwb(36 0% 0%);
  border-left: 10px solid #ff9900;
}
</style>
